<template>
	<view class="content bg-img bg-mask padding-bottom " style="height: 100vh;">
		<u-navbar :title=" i18n.peca.i15" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<view
			style="height: calc(100vh - 90rpx);
		 overflow: scroll;"
		>
			<view class="head flex justify-center padding-top" @click="jump12">
				<image src="../../static/head.png" mode="scaleToFill" class="margin-right-xs"></image>
				<text>Preacher-PECA</text>
			</view>
			<view class="flex justify-end padding-right margin-top-sm">
				<view class="box flex flex-direction justify-center align-center ">
					<text class="text-white" v-if="pee >= 1">≥ 1</text>
					<text class="text-white margin-top-xs" v-else>< 1</text>
				</view>
			</view>
			<!-- <view class="response justify-center flex margin-top-sm">
				<view class="website text-center">
					<text class="f48 text-blue text-white">{{ i18n.index.index1 }}</text>
				</view>
			</view> -->
			<view class="margin-top-xl">
				<view class="flex flex-direction" style="padding: 0 110rpx;">
					<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.1s;">{{ i18n.index.index2 }}：</text>
					<view class="flex animation-slide-bottom align-center " style="animation-delay: 0.4s;">
						<text class="f20 text-white margin-top-xs " style="">{{ data.pecaAddress }}</text>
						<text
							style="white-space: nowrap;background: rgba(14, 16, 16, 0.44); padding: 5rpx; color: #FFFFFF; "
							class="margin-left-xs  r"
							v-clipboard:copy="url2"
							@click="dianji2(data.config.pecdel)"
						>
							{{ i18n.pec.i2 }}
						</text>
					</view>
				</view>
				<!-- <view class="flex flex-direction margin-top" style="padding: 0 110rpx;">
					<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.7s;">{{ i18n.index.index3 }}：</text>
					<text class="f20 text-white margin-top-xs animation-slide-bottom" style="animation-delay: 1s;">{{ data.config.pecdel }}</text>
				</view> -->
			</view>

			<view class="flex justify-center base" style="margin: 100rpx;">
				<QSAnimation animationType="elasticity_Y" @click="jump">
					<view class="animation cuIconfont-spin"></view>
					<view class="qiyuan1 flex align-center flex-direction justify-center">
						<text class="t1">{{ i18n.peca.i5 }}</text>
						<text class="t2">{{ i18n.index.index5 }}</text>
						<text class="t3 margin-top-xs"></text>
						<text class="t4 margin-top-xs">PEC:PECA</text>
						<!-- <text class="t4 margin-top-xs" v-else>{{ dataserial }}U : 1PE</text> -->
					</view>
				</QSAnimation>
			</view>

			<view class="flex justify-center">
				<view class="time flex align-center flex-direction justify-center">
					<text class="tt1">
						<text>{{ i18n.index.index6 }}</text>
					</text>
					<text class="tt1" v-if='data.config.peca_surplus > 0' >
						<text>{{ data.config.pec_time_start }}</text>
					</text>
					<text class="tt1" v-else　 >
						<text>{{ data.config.pec_time_end }}</text>
					</text>
					<text class="tt1 " style="margin-top: 30rpx;">
						<text>{{ i18n.peca.i11 }}</text>
					</text>

					<text class="tt1 ">
						<text>{{ data.config.airdrop_time }}</text>
					</text>
					<view class="" style="height: 100rpx;"></view>
					<!-- 真 Data start-->
					<!-- <block v-if="!jiaData">
						<text class="tt2">
							{{ i18n.index.index7 }}
							<text class="color">{{ data.serial }}</text>
							{{ i18n.index.index8 }}，{{ i18n.index.index9 }}
							<text class="color">{{ data.percentage }}</text>
							%
						</text>
						<text class="tt3 margin-top-xs">{{ i18n.index.index12 }} : {{ redata.peca_total }} {{ i18n.index.index13 }}</text>
						<text class="tt3 margin-top-xs">{{ i18n.index.index9 }}{{ mt1h(data.serial) }}{{ i18n.index.index8 }}</text>
					</block> -->
					<!--  真 Data end-->

					<!-- 假 Data start-->
					<!-- <block v-else>
						<text class="tt2">
							{{ i18n.index.index7 }}
							<text class="color">{{ redata.serial }}</text>
							{{ i18n.index.index8 }}，{{ i18n.index.index9 }}
							<text class="color">{{ redata.percentage }}</text>
							%
						</text>
						<text class="tt3 margin-top-xs">{{ i18n.index.index12 }} : {{ redata.peSurplus }} {{ i18n.index.index13 }}</text>
						<text class="tt3 margin-top-xs">{{ i18n.index.index9 }}{{ mt1h(redata.serial) }}{{ i18n.index.index8 }}</text>
					</block> -->
					<!-- 假 Data end -->
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import QSAnimation from '@/components/QS-Animation/QS-Animation.vue';
export default {
	components: {
		QSAnimation,
	},
	data() {
		return {
			uu: '',
			title: 'Hello',
			data: {},
			show: false,
			rmng: '',
			pee: '',
			jiaData: false,

			timer: '',
			tt: '',
			timerr: '',
			list: {},
			redata: {},
			dataserial: '',
		};
	},

	onLoad() {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);

				// this.show = true;

				this.getHomepage();

				//this.rmngPeCoins();
			} else {
				this.show = false;
			}
		}, 20);

		var obj1 = setInterval(() => {
			if (this.redata.serial) {
				clearInterval(obj1);
				this.payRatio();
			}
		}, 500);
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},
	onShow() {
		this.initWebSocket();
	},
	onHide() {
		uni.closeSocket();
		uni.onSocketClose(function(res) {
			console.log('WebSocket 已关闭！');
		});
		this.websock.close(); //离开路由之后断开websocket连接
	},

	methods: {
		jump12() {
			console.log('111 :>> ', 111);
			uni.navigateTo({
				url: '../Pec/Pec',
			});
		},
		async payRatio() {
			const res = await this.$u.post(
				'/index.php/api/pe/usdt_pe',
				{ serial: this.redata.serial },
				{
					token: uni.getStorageSync('token'),
				},
			);
			this.dataserial = res.data;
			console.log('res11111111111111111: ', res);
		},

		async triggerSmartContract(openAddress) {
			const trc20ContractAddress = openAddress; //contract address
			var address = uni.getStorageSync('uid');

			try {
				let contract = await tronWeb.contract().at(trc20ContractAddress);

				let result = await contract.balanceOf(address).call();
				console.error('result', result);
				this.pee = parseInt(result._hex, 16) / 100000000;
				console.error('this.pee', this.pee);
				//console.error('resultresultresultresultresult', x);

				// let xx=  x.split('').reverse().join("")
				// let xxx =  xx.replace('0','')
				//this.pee

				//this.pee = x.substring(0, x.length - 8);
			} catch (error) {
				console.error('trigger smart contract error', error);
			}
		},
		mth(e) {
			if (e) {
				return e.split(' ')[0];
			}
		},
		mt1h(e) {
			if (e) {
				return 10 - Number(e);
			}
		},
		jump() {
			uni.navigateTo({
				url: 'tongdui?openAddress=' + this.data.openAddress,
			});
		},
		async getHomepage() {
			let obj = {
				//uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post('/index.php/api/pe/index', obj, {
				token: uni.getStorageSync('token'),
			});

			if (res.data.serial == 10 && res.data.surplus == 0) {
				// uni.reLaunch({
				// 	url: '../Pec/Pec',
				// });
			}

			this.data = res.data;
			uni.setStorageSync('surplus', res.data.surplus);

			var uu = 0.3 * Math.pow(1.1, Number(res.data.serial - 1));

			this.uu = uu.toFixed(3);

			uni.setStorageSync('uu', uu + '');
			this.triggerSmartContract(this.data.openAddress);

			console.log('res >>  ', res);
			if (res.data.serial == '1' || res.data.serial == '2') {
				if (res.data.group == 'A') {
					uni.setStorageSync('pay', 1 + '');
					//console.log('111 :>> ', 111);
					this.jiaData = true;
				} else {
					uni.setStorageSync('pay', 0 + '');
					//console.log('2222 :>> ', 2222);
					this.jiaData = false;
				}
			} else {
				//console.log('3333 :>> ', 3333);
				uni.setStorageSync('pay', 0 + '');
				this.jiaData = false;
			}
		},

		time() {
			this.timer = setInterval(() => {
				this.countdown -= 2000;
				if (this.countdown == 0) {
					clearInterval(this.timer);
				}
			}, 1500);
		},

		initWebSocket() {
			//初始化weosocket
			// const wsuri = 'wss://qkl.sumeilan.com:2501';
			const wsuri = 'wss://preacher.ink:2501';
			this.websock = new WebSocket(wsuri);
			this.websock.onmessage = this.websocketonmessage;
			this.websock.onopen = this.websocketonopen;
			this.websock.onerror = this.websocketonerror;
			this.websock.onclose = this.websocketclose;
		},
		websocketonopen() {
			//连接建立之后执行send方法发送数据
			let actions = { test: '12345' };
			this.websocketsend(JSON.stringify(actions));
		},
		websocketonerror() {
			//连接建立失败重连
			//this.initWebSocket();
		},
		websocketonmessage(e) {
			//console.log('e :>> ', e);
			//数据接收
			this.redata = JSON.parse(e.data);

			this.$forceUpdate();
			console.log('this.redata111111111 :>> ', this.redata);
		},
		websocketsend(Data) {
			//数据发送
			this.websock.send(Data);
		},
		websocketclose(e) {
			//关闭
			console.log('断开连接', e);
		},

		async rmngPeCoins() {
			let obj = {
				//uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post('/index.php/api/pe/checkPe', obj, {
				token: uni.getStorageSync('token'),
			});

			this.rmng = res.data;

			console.log('res >>  ', res);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	background-image: url(../../static/bgImg1.png);
	height: 1639rpx;
	.base {
		position: relative;
		.animation {
			position: absolute;
			//top: 100rpx;

			width: 390rpx;
			height: 390rpx;
			border-radius: 50%;
			border-top: 16rpx solid rgba(0, 222, 185, 0.4);
			border-bottom: 16rpx solid rgba(0, 222, 185, 0.4);
		}
	}
	.time {
		.tt1 {
			display: flex;
			flex-direction: column;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e6e6e6;
		}
		.tt2 {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #cccccc;
			margin-top: 70rpx;
			.color {
				font-size: 32rpx;
				color: #04bd9e;
			}
		}
		.tt3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cccccc;
			margin-top: 34rpx;
		}
	}
	.qiyuan1 {
		width: 390rpx;
		height: 390rpx;
		// border: 6rpx solid rgba(0, 222, 185, 0.4);
		border-radius: 50%;
		/deep/.t1,
		.t2 {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff !important;
		}
		.t3 {
			width: 268rpx;
			height: 2rpx;
			background: #cccccc;
		}
		.t4 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #04bd9e;
		}
	}
	.website {
		//width: 190rpx;
		height: 77rpx;
		white-space: nowrap;
		border-bottom: 2rpx dashed #f0f0f0;
	}
	.head {
		image {
			width: 102rpx;
			height: 90rpx;
		}
		text {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
	.box {
		width: 228rpx;
		height: 118rpx;
		background: #161919;
		opacity: 0.7;
		border-radius: 20rpx;
	}
}
</style>
